import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';

/**
 * 上方飘窗容器
 *
 * @export
 * @class TopDrawerWrapper
 */
@Component({
    tag: 'ibz-top-drawer-wrapper',
    styleUrl: 'ibz-top-drawer-wrapper.scss',
})
export class IBzTopDrawerWrapper implements ComponentInterface {
    /**
     * 组件DOM实例
     *
     * @type {HTMLIbzTopDrawerWrapperElement}
     * @memberof IBzTopDrawerWrapper
     */
    @Element()
    el: HTMLIbzTopDrawerWrapperElement;

    /**
     * 是否显示
     *
     * @memberof TopDrawerWrapper
     */
    @Prop()
    isShow = false;

    /**
     * 界面是否允许缓存，关闭不销毁
     *
     * @memberof IBzTopDrawerWrapper
     */
    @Prop()
    isCache = true;

    /**
     * 标题
     *
     * @type {string}
     * @memberof IBzTopDrawerWrapper
     */
    @Prop()
    headerTitle: string;

    /**
     * 容器关闭
     *
     * @type {EventEmitter<void>}
     * @memberof IBzTopDrawerWrapper
     */
    @Event({ eventName: 'closeWrapper' })
    closeWrapper: EventEmitter<void>;

    connectedCallback() {
        setTimeout(() => this.el.classList.add('active'), 50);
        setTimeout(() => this.showDrawer(), 50);
    }

    /**
     * 计算样式
     *
     * @return {*}  {*}
     * @memberof TopDrawerWrapper
     */
    calcStyle(): any {
        if (this.isShow) {
            return {
                'margin-top': 0,
                opacity: 1,
            };
        }
        return null;
    }

    render() {
        return (
            <Host class='top-drawer-wrapper' style={this.calcStyle()}>
                <div class='top-drawer-header'>
                    <div class='header-left'>
                        <div class='drawer-back'>
                            <div
                                class='header-action-item hidden'
                                title='返回'
                                onClick={() => (this.isCache ? this.hiddenDrawer() : this.close())}
                            >
                                <span class='icon'>
                                    <ion-icon name='chevron-back-outline'></ion-icon>
                                </span>
                                <span class='label'>返回</span>
                            </div>
                        </div>
                        <div class='header-title'>{this.headerTitle}</div>
                    </div>
                    <div class='header-right'>
                        <div class='header-actions'>
                            <div class='header-action-item close' title='关闭' onClick={() => this.close()}>
                                <ion-icon name='close' />
                            </div>
                        </div>
                    </div>
                </div>
                <div class='top-drawer-content'>
                    <slot />
                </div>
            </Host>
        );
    }

    /**
     * 变更显示隐藏状态
     *
     * @return {*}  {Promise<boolean>} 返回变更后状态
     * @memberof TopDrawerWrapper
     */
    @Method()
    async showChange(): Promise<boolean> {
        this.isShow = !this.isShow;
        return this.isShow;
    }

    /**
     * 显示
     *
     * @return {*}  {Promise<void>}
     * @memberof TopDrawerWrapper
     */
    @Method()
    async showDrawer(): Promise<void> {
        this.isShow = true;
    }

    /**
     * 隐藏
     *
     * @return {*}  {Promise<void>}
     * @memberof TopDrawerWrapper
     */
    @Method()
    async hiddenDrawer(): Promise<void> {
        this.isShow = false;
    }

    /**
     * 关闭飘窗
     *
     * @return {*}  {Promise<void>}
     * @memberof IBzTopDrawerWrapper
     */
    @Method()
    async close(): Promise<void> {
        await this.hiddenDrawer();
        setTimeout(() => {
            this.el.remove();
            this.closeWrapper.emit();
        }, 500);
    }
}
